<template>
  <div>
    <h1>插槽</h1>
    <!-- <hm-dialog></hm-dialog>
    <br /><br /><br /> -->
    <!-- input + checkbox -->
    <hm-dialog>
      <template #default="objA">
        <!-- 作用域插槽 给使用者提供便利
          接受的数据只能在自己的template使用
          所以是作用域
         -->
        {{ objA.a }} - {{ objA.b }}
        <input type="text" />
        <input type="checkbox" />
      </template>

      <!-- {{ objA }} -->

      <template v-slot:footer="objB">
        {{ objB.c }} - {{ objB.d.x }}
        <button>点击</button>
      </template>
    </hm-dialog>
    <!-- <hm-dialog>
      <div>这是我自己传的内容</div>
      <template #footer>
        <input type="text" />
      </template>
    </hm-dialog> -->
  </div>
</template>

<script>
import HmDialog from "./components/hm-dialog.vue";
export default {
  components: {
    HmDialog,
  },
};
</script>

<style>
</style>
